<template>
    <div class="editor-wrapper">
        <div :id="editorId"></div>
    </div>
</template>
<script>

import { oneOf } from '_libs/util'

const isDev = process.env.NODE_ENV === 'development';

export default {
    name: 'Editor',
    props: {
        id: null,
        value: {
            type: String,
            default: ''
        },
        //绑定的值的类型, enum: ['html', 'text']
        valueType: {
            type: String,
            default: 'html',
            validator: (val) => {
                return oneOf(val, ['html', 'text'])
            }
        },
        //设置change事件触发时间间隔
        changeInterval: {
            type: Number,
            default: 200
        },
        // 是否开启本地存储
        cache: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        editorId() {
            return `editor${this.id || this._uid}`
        }
    },
    methods: {
        setHtml(val) {
            this.editor.txt.html(val)
        },
        getHtml(){
            //清除空标签
            return this.editor.txt.html().replace(/<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig,"")
        }
    },
    mounted() {
        this.editor = new this.$wangeditor(`#${this.editorId}`)
        this.editor.customConfig.onchange = (html) => {
            let text = this.editor.txt.text()
            if (this.cache) localStorage.editorCache = html
            this.$emit('input', this.valueType === 'html' ? html : text)
            this.$emit('on-change', html, text)
        };

        // 关闭粘贴样式的过滤
        this.editor.customConfig.zIndex = 2
        this.editor.customConfig.menus =[
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'undo',  // 撤销
            'redo'  // 重复
        ]
        this.editor.customConfig.colors = [
            '#000000',
            '#ffffff',
            '#eeece0',
            '#1c487f',
            '#4d80bf',
            '#c24f4a',
            '#8baa4a',
            '#7b5ba1',
            '#46acc8',
            '#f9963b',
        ];
        this.editor.customConfig.pasteFilterStyle = false
        this.editor.customConfig.onchangeTimeout = this.changeInterval
        
        this.editor.customConfig.showLinkImg = false;
        this.editor.customConfig.linkCheck = (text, link)=> { //超链接校验
            if (link != "") {
                var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
                if (!reg.test(link)) {
                    this.$tipsMessage('请输入正确的网址(例如 http://baidu.com)');
                }else{
                    return true
                }
            }
        };
        //上传
        const upParams = {uploadType:'goods',uploadModel:'GoodsDetail'};
        // this.editor.customConfig.uploadImgServer = getUrl('editorUpFile');
        // this.editor.customConfig.uploadImgParams = upParams;
        // this.editor.customConfig.uploadFileName = 'file'
        this.editor.customConfig.customUploadImg = async (files, insert)=> {
            let res;
            if(isDev){
                res = {
                    "picList":['http://testa.outdoorclub.com.cn/p1/GoodsDetail/goodsPic/2020/6/18//goodsPic/15924699164695361.jpg']
                }
            }else{
                res = await this.$post('editorUpFile',upParams,{
                    fileData: {'file': files}
                });
            };

            if(res && res.picList) {
                res.picList.forEach((el,ix) => {
                    insert(el)
                })
            };
        };
        this.editor.customConfig.customUploadVideo = async (files, insert)=> {
            let res;
            if(isDev){
                res = {
                    "video":"http://testa.outdoorclub.com.cn/p5/goods_video/goods/tmp/2/15924845993379812.mp4",
                    "videoPic":"http://testa.outdoorclub.com.cn/p5/goods_video/goods/tmp/2/15924845993379812.jpg"
                }
            }else{
                res = await this.$post('editorUpFile',upParams,{
                    fileData: {'videoFile': files}
                });
            }
            if(res && res.video) {
                insert(res.video,res.videoPic)
            };
        };

        this.editor.create()
            // 如果本地有存储加载本地存储内容
        let html = this.value || localStorage.editorCache;
        if (html) this.editor.txt.html(html)
    }
}
//this.insertLinkImg.bind(this)
</script>
<style lang="less">
.editor-wrapper{
    .w-e-text-container{
        height: 600px !important;
    }
    .upVideo,.upImg{
        width: 100%;
        display: block;
        &:hover{
            -webkit-box-shadow: none!important;
            box-shadow: none!important;
        }
    }
    .upVideo{
        object-fit:fill;
    }
}
</style>
